<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 500px;
        margin: 100px auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

    form {
        margin: 0 auto;
        width: 100%;
        /* display: flex; */
    }

    input {
        width: 75px;
    }

    form input:nth-child(3) {
        width: 45px;
    }

    form input:last-child {
        width: 100px;
    }

    tbody input {
        width: 50px;
    }

    td,
    th {
        border: 1px solid #333;
    }

    thead tr {
        height: 40px;
        background-color: #ccc;
    }
</style>

<body>
    <!-- 问题一

    注册事件的方式有哪几种？我们后面推荐使用哪一种？

    元素.onclick、元素.addEventListener('click',function(e){}) 
    推荐使用后者


    问题二

	e.target和this有什么区别？
    e.target指向真正的事件源、this指向绑定事件的当前元素



    问题三

	事件委托是什么意思？如何实现事件委托？在什么场景下必须使用事件委托？
    
    通过对父元素绑定事件在用e.target找到真正的事件源对其进行操作吗
    在需要绑定事件的元素不存在时必须使用事件委托

-->
    <div>
        <form action="javascript:;">
            姓名：<input type="text">
            科目：<input type="text">
            成绩：<input type="number">
            <input type="submit" value="添加学生信息" id="btn">
        </form>
        <table cellspacing="0">

            <thead>
                <tr>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>
<script>
    var datas = [{
        name: '魏璎珞',
        subject: 'JavaScript',
        score: 100
    }, {
        name: '弘历',
        subject: 'JavaScript',
        score: 98
    }, {
        name: '傅恒',
        subject: 'JavaScript',
        score: 99
    }, {
        name: '明玉',
        subject: 'JavaScript',
        score: 88
    }, {
        name: '大猪蹄子',
        subject: 'JavaScript',
        score: 0
    }, {
        name: '康熙',
        subject: 'JavaScript',
        score: 98
    },
    {
        name: '皇太极',
        subject: 'JavaScript',
        score: 98
    }
    ];
    // 获取form
    var form = document.querySelector('form')
    // 获取提交按钮和tbody
    var btn = document.querySelector('#btn')
    var tbody = document.querySelector('tbody')
    // 给拜托你绑定点击事件
    btn.addEventListener('click', function (e) {
        // 判断是否有输入框内容为空
        for (var i = 0; i < form.children.length - 1; i++) {
            if (form.children[i].value === '') {
                alert('信息不能有空')
                return
            }
        }
        var tr = document.createElement('tr')
        tbody.appendChild(tr)
        for (var i = 0; i < form.children.length - 1; i++) {
            var td = document.createElement('td')
            td.innerHTML = form.children[i].value
            tr.appendChild(td)
            form.children[i].value = ''
        }
        var td = document.createElement('td')
        td.innerHTML = '<a href="javascript:;" class="del">删除</a>\t<a href="javascript:;" class="bj">编辑</a>'
        tr.appendChild(td)

    })

    // 根据数组元素个数创建tr放到tbody中
    for (var i = 0; i < datas.length; i++) {
        var tr = document.createElement('tr')
        tbody.appendChild(tr)
        // 根据对象元素个数创建td放到tr中
        for (var k in datas[i]) {
            var td = document.createElement('td')
            td.innerHTML = datas[i][k]
            tr.appendChild(td)
        }
        // 创建一个td里面放置一个a连接用来做点击事件
        var td = document.createElement('td')
        td.innerHTML = '<a href="javascript:;" class="del">删除</a>\t<a href="javascript:;" class="bj">编辑</a>'
        tr.appendChild(td)
    }
    tbody.addEventListener('click', function (e) {
        if (e.target.className == 'del') {
            e.target.parentNode.parentNode.remove()
        }
        tbody.addEventListener('click', fn)
    })

    
    tbody.addEventListener('click', fn)



    function fn(e) {
        if (e.target.className == 'bj') {
            // 用一个变量将e.target.parentNode.parentNode.children[2]装起来方便之后使用
            var tr_3_td = e.target.parentNode.parentNode.children[2]
            var temp = e.target.parentNode.parentNode.children[2].innerHTML
            tr_3_td.innerHTML =``
            var text=document.createElement('input')
            text.value=temp
            var baocun=document.createElement('input')
            baocun.type='button'
            baocun.value='保存'
            var quxiao=document.createElement('input')
            quxiao.type='button'
            quxiao.value='取消'
            tr_3_td.appendChild(text);
            tr_3_td.appendChild(baocun);
            tr_3_td.appendChild(quxiao);
            tbody.removeEventListener('click', fn)
            baocun.addEventListener('click', function () {
                tr_3_td.innerHTML = text.value
                tbody.addEventListener('click', fn)
            })
            quxiao.addEventListener('click', function () {
                tr_3_td.innerHTML = temp
                tbody.addEventListener('click', fn)
            })
        }

    }

</script>

</html>